:root {
  //边距、内填充
  --space-width: 3vw;
  --space-width-half: 1.5vw;

  //文字大小
  --font-size-default: 4vw;
  --font-size-small: 3vw;
  --font-size-tiny: 2vw;
  --font-size-large: 5vw;
  --font-size-bigger: 6vw;
  --font-size-maximum: 7vw;

  //按钮大小
  --button-height-maximum: 12vw;
  --button-height-bigger: 10vw;
  --button-height-large: 8vw;
  --button-height: 6vw;
  --button-height-small: 5vw;
  --button-height-tiny: 4vw;
}
html {
  font-size: var(--font-size-default);
}
body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 640px;
  font-size: var(--font-size-default);
  overflow: visible;
}

.page-outlet {
  width: 100%;
  position: relative;
  height: 100vh;
  display: flex;
  flex-flow: column;
  max-width: 640px;
  .page-header {
    //border-bottom: solid var(--pixel) var(--border-color);
  }
  .page-content {
    flex: 1;
    overflow: auto;
    padding: var(--space-width);
  }
  .page-footer {
    //border-top: solid var(--pixel) var(--border-color);
  }
}

.info-items {
  .info-item {
    padding: var(--space-width-half) 0;
    .center{ min-width: 6rem; }
  }
}

@media screen and (min-width: 640px) {
  :root {
    //边距、内填充
    --space-width: 10px;
    --space-width-half: 5px;
    //文字大小
    --font-size-maximum: 42px;
    --font-size-bigger: 36px;
    --font-size-large: 30px;
    --font-size-default: 24px;
    --font-size-small: 18px;
    --font-size-tiny: 12px;
    //按钮大小
    --button-height-maximum: 56px;
    --button-height-bigger: 50px;
    --button-height-large: 44px;
    --button-height: 38px;
    --button-height-small: 32px;
    --button-height-tiny: 26px;
  }
}
@media screen and (max-width: 640px) {
  .page-outlet {
    .page-header {
      background: var(--background);
    }
    .page-content {
      padding: 0 var(--space-width);
    }
  }
}